<template>
    <header>
        <div class="container w-10/12 m-auto">
            <div class="header flex justify-between items-center">
                <router-link to="/" class="menu-logo">
                    <img src="../assets/img/logo.svg" style="width:160px ;" class="img-fluid" alt="Logo">
                </router-link>
                <ul class="flex justify-between items-center">
                    <li class="mx-4" :class="{ 'active': $route.path === '/' }">
                        <router-link to="/">
                            首页
                        </router-link>
                    </li>
                    <li class="mx-4" :class="{ 'active': $route.path === '/course-center' }">
                        <router-link to="/course-center">
                            课程中心
                        </router-link>
                    </li>
                    <li class="mx-4">
                        <a href="index.html">题库超市-ing</a>
                    </li>
                    <li class="mx-4">
                        <a href="index.html">我的作品-ing</a>
                    </li>
                    <li class="mx-4">
                        <a href="index.html">自由创作-ing</a>
                    </li>

                </ul>

                <ul class="">
                    <template v-if="!userInfo.data.token">
                        <li class="nav-item">
                            <router-link class="px-10 py-4 bg-gray-300 hover:text-white hover:bg-red-300 rounded-full"
                                to="/login">登录</router-link>
                            <!-- <a class="nav-link header-sign" href="login.html">Signin</a> -->
                        </li>

                    </template>
                    <template v-else>
                        <AppHeaderUserTip />


                        <!-- <li class="nav-item">
        <a class="nav-link header-login" href="register.html">注册</a>
    </li> -->

                        <!-- <li class="nav-item">
                            <img src="../assets/img/icon/messages.svg" style="width: 160px;" class="img-fluid"
                                alt="img">
                        </li> -->
                        <!-- <li class="nav-item cart-nav">
                            <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
                                <img src="../assets/img/icon/cart.svg" alt="img"> {{ cart.length }}
                            </a>
                            <div class="wishes-list dropdown-menu dropdown-menu-right">
                                <div class="wish-header">
                                    <router-link to="/checkout" class="float-end">
                                        结算
                                    </router-link>
                                </div>
                                <div class="wish-content">
                                    <ul>
                                        <li>
                                            <div class="media">
                                                <div class="d-flex media-wide">
                                                    <div class="avatar">
                                                        <a href="course-details.html">
                                                            <img alt="" src="../assets/img/course/course-04.jpg">
                                                        </a>
                                                    </div>
                                                    <div class="media-body">
                                                        <h6><a href="course-details.html">Learn Angular...</a></h6>
                                                        <p>By Dave Franco</p>
                                                        <h5>$200 <span>$99.00</span></h5>
                                                    </div>
                                                </div>
                                                <div class="remove-btn">
                                                    <a href="#" class="btn">Remove</a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="media">
                                                <div class="d-flex media-wide">
                                                    <div class="avatar">
                                                        <a href="course-details.html">
                                                            <img alt="" src="../assets/img/course/course-14.jpg">
                                                        </a>
                                                    </div>
                                                    <div class="media-body">
                                                        <h6><a href="course-details.html">Build Responsive
                                                                Real...</a></h6>
                                                        <p>Jenis R.</p>
                                                        <h5>$200 <span>$99.00</span></h5>
                                                    </div>
                                                </div>
                                                <div class="remove-btn">
                                                    <a href="#" class="btn">Remove</a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="media">
                                                <div class="d-flex media-wide">
                                                    <div class="avatar">
                                                        <a href="course-details.html">
                                                            <img alt="" src="../assets/img/course/course-15.jpg">
                                                        </a>
                                                    </div>
                                                    <div class="media-body">
                                                        <h6><a href="course-details.html">C# Developers Double
                                                                ...</a></h6>
                                                        <p>Jesse Stevens</p>
                                                        <h5>$200 <span>$99.00</span></h5>
                                                    </div>
                                                </div>
                                                <div class="remove-btn">
                                                    <a href="#" class="btn">Remove</a>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    <div>
                                        <button>结算</button>
                                        <div class="total-item">
                                            <h6>Subtotal : $ 600</h6>
                                            <h5>Total : $ 600</h5>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </li> -->
                        <!-- <li class="nav-item noti-nav">
                            <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
                                <img src="../assets/img/icon/notification.svg" alt="img">
                            </a>
                            <div class="notifications dropdown-menu dropdown-menu-right">
                                <div class="topnav-dropdown-header">
                                    <span class="notification-title">Notifications
                                        <select>
                                            <option>All</option>
                                            <option>Unread</option>
                                        </select>
                                    </span>
                                    <a href="javascript:void(0)" class="clear-noti">Mark all as read <i
                                            class="fa-solid fa-circle-check"></i></a>
                                </div>
                                <div class="noti-content">
                                    <ul class="notification-list">
                                        <li class="notification-message">
                                            <div class="media d-flex">
                                                <div>
                                                    <a href="notifications.html" class="avatar">
                                                        <img class="avatar-img" alt=""
                                                            src="../assets/img/user/user1.jpg">
                                                    </a>
                                                </div>
                                                <div class="media-body">
                                                    <h6><a href="notifications.html">Lex Murphy requested
                                                            <span>access to</span> UNIX directory tree hierarchy
                                                        </a></h6>
                                                    <button class="btn btn-accept">Accept</button>
                                                    <button class="btn btn-reject">Reject</button>
                                                    <p>Today at 9:42 AM</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="notification-message">
                                            <div class="media d-flex">
                                                <div>
                                                    <a href="notifications.html" class="avatar">
                                                        <img class="avatar-img" alt=""
                                                            src="../assets/img/user/user2.jpg">
                                                    </a>
                                                </div>
                                                <div class="media-body">
                                                    <h6><a href="notifications.html">Ray Arnold left 6
                                                            <span>comments on</span> Isla Nublar SOC2 compliance
                                                            report</a></h6>
                                                    <p>Yesterday at 11:42 PM</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="notification-message">
                                            <div class="media d-flex">
                                                <div>
                                                    <a href="notifications.html" class="avatar">
                                                        <img class="avatar-img" alt=""
                                                            src="../assets/img/user/user3.jpg">
                                                    </a>
                                                </div>
                                                <div class="media-body">
                                                    <h6><a href="notifications.html">Dennis Nedry <span>commented
                                                                on</span> Isla Nublar SOC2 compliance report</a>
                                                    </h6>
                                                    <p class="noti-details">“Oh, I finished de-bugging the phones,
                                                        but the system's compiling for eighteen minutes, or twenty.
                                                        So, some minor systems may go on and off for a while.”</p>
                                                    <p>Yesterday at 5:42 PM</p>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="notification-message">
                                            <div class="media d-flex">
                                                <div>
                                                    <a href="notifications.html" class="avatar">
                                                        <img class="avatar-img" alt=""
                                                            src="../assets/img/user/user1.jpg">
                                                    </a>
                                                </div>
                                                <div class="media-body">
                                                    <h6><a href="notifications.html">John Hammond
                                                            <span>created</span> Isla Nublar SOC2 compliance report
                                                        </a></h6>
                                                    <p>Last Wednesday at 11:15 AM</p>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li> -->
                        <!-- 
                        </li> -->
                    </template>
                </ul>
            </div>
        </div>
    </header>
</template>
<script setup>
import useUseInfo from '@/store/user'
const userInfo = useUseInfo()
</script>